<template>
	<div class="time-picker">
		<input type="text" readonly class="form-control cascader-input" data-togger="dropdown" :data-target="id"/>
		<a class="pull-right">
			<icon class="fa-times cascader-remove-icon"></icon>
		</a>
		<drop-down :id="id">
			<ul class="nav nav-list display-inline" v-show="status.hour">
				<p>小时</p>
				<li class="text-center" v-for="hour in time.hour"><a>{{formatNumber(hour)}}</a></li>
			</ul>
			<ul class="nav nav-list display-inline" v-show="status.minute">
				<p>分钟</p>
				<li class="text-center" v-for="minute in time.minute"><a>{{formatNumber(minute)}}</a></li>
			</ul>
			<ul class="nav nav-list display-inline" v-show="status.second">
				<p>秒</p>
				<li class="text-center" v-for="second in time.second"><a>{{formatNumber(second)}}</a></li>
			</ul>
			<ul class="nav nav-list display-inline" v-show="status.type">
				<p>上午/下午</p>
				<li class="text-center"><a>AM</a></li>
				<li class="text-center"><a>PM</a></li>
			</ul>
		</drop-down>
	</div>
</template>

<script>
	import './timepicker.css';
	import Icon from '../widget/Icon.vue';
	import DropDown from '../menu/DropDown.vue';
	export default {
		name: 'TimePicker',
		data () {
			return {
				value: '',
				backUp: '',
				type: false,
				show: false,
				status: {
					hour: true,
					minute: true,
					second: true,
					type: false
				},
				time: {
					hour: [],
					minute: [],
					second: []
				}
			};
		},
		props: {
			id: {type: String, required: true},
			val: {type: String, validator: (val) => { return true; }},
			format: {type: String, default: 'H:M:S'},
			hour: {type: Boolean, default: true},
			minute: {type: Boolean, default: true},
			second: {type: Boolean, default: true}
		},
		methods: {
			switchShow (event) {
				this.show = !this.show;
			},
			setDefault () {
				for (let i = 0; i < 24; i++) {
					this.time.hour.push(i);
				}
				for (let i = 0; i < 60; i++) {
					this.time.minute.push(i);
					this.time.second.push(i);
				}
			},
			stopMe () {

			},
			formatNumber (number) {
				if (number < 10) {
					return '0' + number;
				} else {
					return number;
				}
			}
		},
		components: {
			Icon,
			DropDown
		},
		mounted () {
			this.setDefault();
			document.body.addEventListener('click', () => {
				if (this.show === true) {
					this.show = false;
				}
			});
		}
	};
</script>
